<template>
	<view>
		<head-navbar :back="true" style="border-bottom: none;">
			<view>
				<text>{{title}}</text>
			</view>
		</head-navbar>
		<view class="content">
			<view class="box" >
				<view class="title">
					<view class="text">兑换数量</view>
				</view>
				<view class="select"><input type="digit" v-model="zuanshiNum" placeholder="请输入金额" /></view>
				<view class="down">
					<view class="left">{{tip}}：{{money}}</view>
					<view class="right" v-if="$store.state.dataBody.diamondTransferYueTaxRate != 0 && type == 1">手续费：{{Math.floor($store.state.dataBody.diamondTransferYueTaxRate*zuanshiNum*100)/100}}</view>
					<view class="right" v-if="$store.state.shopDataBody.balanceTransferDiamondTaxRate != 0 && type == 3">手续费：{{Math.floor($store.state.shopDataBody.balanceTransferDiamondTaxRate*zuanshiNum*100)/100}}</view>
				</view>
			</view>
			<button class="btn" @click="submit">确认</button>
		</view>
		<ssPaymentPassword ref="paymentPassword" :mode="mode" :digits="6" :forget="false" @submit="submitHandle" />
	</view>
</template>

<script>
	import ssPaymentPassword from '@/components/sanshui-payment-password'
	import * as api from '@/api/user/money.js';
	import * as user from '@/api/user/index.js';
	export default {
		components:{
		    ssPaymentPassword
		},
			data() {
				return {
					mode:1,
					type:null,
					title:'',
					money:'',
					zuanshiNum:'',
					reg:/^\d+(\.\d{0,2})?$/
				}
			},
			onLoad(option) {
				this.type = option.type
				this.money = option.money
				switch(this.type){
					case '1':
					this.title = '钻石兑换'
					this.tip = '当前钻石余额'
					break;
					case '3':
					this.title = '余额兑换'
					this.tip = '当前余额'
					default:
					break;
				}
			},
			methods: {
				submit(){
						if(this.zuanshiNum == ''){
							uni.showToast({
								title:'兑换数量不能为0',
								icon:'none'
							})
							return
						}
						if(!this.reg.test(this.zuanshiNum)){
							uni.showToast({
								title:'兑换数量最多两位小数',
								icon:'none'
							})
							return
						}
						this.$refs.paymentPassword.modalFun('show');
				},
				submitHandle(e){
					if(this.type == 1){
						this.diamondTransferBalance(e.value)
					}else if(this.type == 3){
						this.balanceTransferDiamond(e.value)
					}
				},
				diamondTransferBalance(value){
					api.diamondTransferBalance({request:{diamond:this.zuanshiNum,password:value}}).then(res=>{
						uni.showToast({
							title:'兑换成功',
							icon:'none'
						})
						this.money = this.money - this.zuanshiNum
						this.zuanshiNum = ''
						this.$api.prePage().status = 'loading'
						this.$api.prePage().list = []
						this.$api.prePage().pageNo = 1
						this.$api.prePage().moneyNumber = this.money
						this.$api.prePage().getRecordList()
						
					})
				},
				balanceTransferDiamond(value){
					user.balanceTransferDiamond({amount:this.zuanshiNum,password:value}).then(res=>{
						uni.showToast({
							title:'兑换成功',
							icon:'none'
						})
						this.money = this.money - this.zuanshiNum
						this.zuanshiNum = ''
						this.$api.prePage().status = 'loading'
						this.$api.prePage().list = []
						this.$api.prePage().pageNo = 1
						this.$api.prePage().moneyNumber = this.money
						this.$api.prePage().getRecordList()
						
					})
				},
			}
		}
</script>

<style lang="scss" scoped>
  .content{
	  padding: 30rpx;
	  .box{
		  background: #FFFFFF;
		  border-radius: 20rpx;
		  padding: 30rpx;
		  .title{
			  display: flex;
			  align-items: center;
			  .text{
				  flex: none;
				  font-size: 30rpx;
				  margin-right: 20rpx;
			  }
		  }
		  .title2{
			  margin-top: 40rpx;
		  }
		  input{
		  	   font-size: 26rpx;
		  }
		  .select{
			  margin-top: 30rpx;
			  color: #9A9A9A;
			  font-size: 24rpx;
			  padding-bottom: 20rpx;
			  border-bottom: 1rpx solid #f4f4f4;
		  }
		  .down{
			  margin-top: 30rpx;
			  font-size: 26rpx;
			  display: flex;
			  justify-content: space-between;
			  .left{
				  color: #FF5C02;
			  }
			  .right{
				   color: #9A9A9A;
			  }
		  }
	  }
	  .btn{
		  background: #FF5C02;
		  border-radius: 100rpx;
		  color: #FFFFFF;
		  margin-top: 30rpx;
	  }
  }
</style>
